<template>
  <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
    <el-form @submit.native.prevent label-width="100px">
      <el-row style="display: flex;justify-content: center">
        <el-col :span="12">
          <el-upload
              class="upload"
              action="/uploadController/upload"
              list-type="picture"
              :limit="1"
              :show-file-list="false"
              :on-success="onSuccess"
              :on-preview="handlePictureCardPreview">
            <el-image :src="img.imgUrl">
              <div slot="placeholder" class="image-slot">
                加载中<span class="dot">...</span>
              </div>
            </el-image>
          </el-upload>

        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
          <el-button @click="cancelActivity" size="small">取 消</el-button>
          <el-button type="primary" @click="saveSwiper" size="small">确 定</el-button>
        </span>
  </el-dialog>
</template>

<script>
import {Message} from "element-ui";

export default {
  name: "ActivityOper",
  data() {
    return {
      title: '',
      dialogVisible: false,
      callbackImageView: true,
      img:{
        flag: 0,
        img: '',
        imgUrl: ''
      },
      rules:{
        activityName: [
          { required:true,message:"请输入活动名称", trigger: 'blur' },
          { min:3,max:10,message: "长度在3到10个字符之间", trigger: 'blur' }
        ],
        createtime: [{required: true, message: '请输入创建日期', trigger: 'blur'}],
        updatetime: [{required: true, message: '请输入修改日期日期', trigger: 'blur'}],
      },
    };
  },
  methods: {
    clearObj(obj) {
      Object.keys(obj).forEach(key => {
        obj[key] = "";
      });
    },
    closeView() {
      this.dialogVisible = false;
    },

    removeImage(fileId) {
      this.deleteRequest("/uploadController/delete", {id: this.activity.uploadFileId}).then(resp => {
        if (resp.code === 200) {
          Message.success("删除成功！");
        } else {
          Message.error("删除失败！");
        }
      });
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    },
    handleRemove(file, fileList) {
      this.removeImage(this.activity.uploadFileId);
    },
    handlePictureCardPreview(file) {
      debugger
      this.imgUrl = file.url;
    },
    onSuccess(resp,file,fileList) {
      if (resp.data) {
        this.img.imgUrl = this.imgDomain + resp.data.compression;
        this.getRequest("/uploadController/getUploadFileInfo", {"compression": resp.data.compression}).then(resp => {
          if (resp) {
            this.img.img = resp.data.id;
          }
        });
      }
    },
    cancelActivity() {
      this.closeView();
    },
    saveSwiper() {
      this.img.flag = "0";
      this.postRequest("/swiper/img/insertImg", this.img).then(resp => {
        if (resp.code === 200) {
          this.$parent.initSwiperDate();
          Message.success("添加成功");
          this.closeView();
        } else {
          Message.success("添加失败");
        }
      });
    }
  }
}
</script>

<style scoped>
  .upload {
    border: 1px dotted #dedede;
    margin-top: 15px;
    display: none;
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>
